import {
  View, Image, Checkbox, Text
} from "@tarojs/components";
import "./index.scss";
import { AtForm, AtInput, AtButton } from "taro-ui";
import { useState } from "react";
import { CustomRequest } from "@/utils/request";
import Auth from "@/utils/auth";
import Taro from "@tarojs/taro";
import { useDispatch } from "react-redux";
import { changeToLogin } from "@/actions/login";
import Logo from '@/assets/logo.png'

export const LoginPage = () => {

  const [loading, setLoading] = useState(false)
  const dispatch = useDispatch()
  const [info, setInfo] = useState({
    username: '',
    password: ''
  })
  const [checked, setChecked] = useState(false)
  const onSubmit = () => {
    setLoading(true)

    const { username, password } = info

    if (!username) {
      Taro.showToast({
        title: "用户名不能为空",
        icon: 'none'
      })
    }

    if (!password) {
      Taro.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
    }

    CustomRequest.post('/auth/user/login', {
      username,
      password
    }).then((res: string) => {
      setLoading(false)
      if (res) {
        console.log(res)
        Taro.setStorageSync('token', res)
        return true
      }
      return false
    }).then((res) => {
      if (res) {
        Taro.reLaunch({
          url: `/pages/index/index`
        }).then(() => {
          dispatch(changeToLogin())
        })
      }
    })

  }

  const usernameChange = (value) => {
    setInfo({
      ...info,
      username: value
    })
  }

  const passwordChange = (value) => {
    setInfo({
      ...info,
      password: value
    })

  }

  return (
    <View className="index">
      <View className='logo'>
        <Image src={Logo} mode='widthFix' style={{ width: '100px' }} />
      </View>

      <AtForm
        className='login-form'
        onSubmit={onSubmit}
      >
        <AtInput
          autoFocus
          name='username'
          type='text'
          placeholder='请输入手机号'
          value={info.username}
          onChange={usernameChange}
        >
          <View>发送验证码</View>
        </AtInput>
        <AtInput
          name='yzm'
          type='text'
          placeholder='请输入验证码'
          value={info.password}
          onChange={passwordChange}
        />
        <AtButton
          className='btn'
          type='primary'
          loading={loading}
          disabled={!(info.username && info.password)}
          onClick={onSubmit}
        >登 录</AtButton>
      </AtForm>
      <View className='deal'>
        <Checkbox value='选中'
          onChange={() => {
            setChecked(!checked)
          }}
          checked={checked} className='check'></Checkbox>
        <View style={{ marginTop: '1px' }}>
          勾选登录代表您已同意
          <Text className='alink'>凡求书画用户服务协议和隐私政策</Text>
        </View>
      </View>
    </View>
  );
}

export default LoginPage;


